<template>
	<div ref="chartRef" id="rightdiv_Funnelecharts" style="width: 100%; height: 280px"></div>
</template>

<script lang="js" setup>
	import * as echarts from 'echarts';
	import {ref, watch, onMounted} from 'vue';

	// 定义 props
	const props = defineProps({
		chartData: {
			type: Array,
			default: () => [],
		},
	});

	// 使用 ref 管理 myChart
	const myChart = ref(null);

	// 初始化图表
	function initCharts() {
		if (!myChart.value) return; // 确保 myChart 已初始化

		let option = {
			color: ['#0e76d7', '#ff9447', '#f63016'],
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c}个',
			},
			series: [
				{
					name: '风险种类',
					type: 'funnel',
					left: '1%',
					right: '1%',
					top: 10,
					bottom: 10,
					width: '100%',
					min: 60,
					max: 100,
					minSize: '30%',
					maxSize: '100%',
					sort: 'descending',
					gap: 3,
					label: {
						show: true,
						position: 'inside',
					},
					labelLine: {
						length: 10,
						lineStyle: {
							width: 1,
							type: 'solid',
						},
					},
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1,
					},
					emphasis: {
						label: {
							fontSize: 20,
						},
					},
					data: [
						{value: 10, name: '高风险'},
						{value: 80, name: '中风险'},
						{value: 1003, name: '低风险'},
					],
				},
			],
		};
		if (props.chartData.length) {
			option.series[0].data = props.chartData
		}
		myChart.value.setOption(option);
	}

	// 监听 chartData 变化
	watch(
		() => props.chartData,
		() => {
			initCharts();
		},
		{immediate: true}
	);

	// 在 onMounted 中初始化 myChart
	onMounted(() => {
		myChart.value = echarts.init(document.getElementById('rightdiv_Funnelecharts'));
		initCharts();
		window.addEventListener('resize', () => {
			myChart.value.resize();
		});
	});
</script>
